<template>
  <el-card shadow="always">
    <el-pagination
      slot="header"
      :page-size="pageSize"
      :page-sizes="[10, 15]"
      :layout="paginationLayout"
      :current-page.sync="currentPage"
      :total="docLogs.length"
    ></el-pagination>
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      row-key="id"
      ref="logList"
      id="logList"
      size="mini"
      highlight-current-row
    >
      <el-table-column
        label="操作类型"
        prop="type"
        align="center"
        header-align="center"
        sortable
      ></el-table-column>
      <el-table-column
        label="操作人"
        prop="operator"
        align="center"
        header-align="center"
        sortable
      ></el-table-column>
      <el-table-column
        label="操作时间"
        prop="updateTime"
        align="center"
        header-align="center"
        sortable>
        <div slot-scope="scope">{{ scope.row.updateTime.substr(5, 11) }}</div>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
export default {
  name: 'DocumentLogsList',
  props: {
    logs: {
      type: Array,
      default: function () {
        return []
      }
    },
    paginationLayout: {
      type: String,
      default: 'total, prev, pager, next'
    }
  },
  data () {
    return {
      pageSize: 10,
      currentPage: 1,
      tableLoading: false
    }
  },
  computed: {
    docLogs () {
      return this.$store.getters.documentLogs
    },
    tableData () {
      return this.docLogs.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    }
  },
  watch: {
    logs: {
      handler (newVal, oldVal) {
        this.logs = newVal
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  border: 0;
}
</style>
